<template>
  <div>
    <div class="items-wrapper">
      <van-cell-group>
        <van-field v-model="oldPassword" placeholder="输入旧密码"></van-field>
        <van-field v-model="newPassword" type="password" placeholder="输入新密码"></van-field>
        <van-field v-model="checkPassword" type="password" placeholder="再次输入新密码"></van-field>
      </van-cell-group>
    </div>
    <div class="button-wrapper">
      <button type="button" @click="submit" class="btn btn-yellow">确定</button>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import qs from 'qs'


// 修改密码接口
export default {
  name: 'PasswordReset',
  data () {
    return {
      oldPassword: '',
      newPassword: '',
      checkPassword: ''
    }
  },
  created () {

  },
  methods: {
    submit: function() {
      if (!this.oldPassword) {
        return this.$toast.fail('请输入旧密码')
      }
      if (!this.newPassword || this.newPassword.length < 6) {
        return this.$toast.fail('请输入符合要求的新密码')
      }
      if (this.newPassword != this.checkPassword) {
        return this.$toast.fail('两次输入的新密码不一致')
      }
      // 转菊花
      this.$toast.loading({ duration: 0 })
      var that = this
      var params = {
        'old_password': this.oldPassword,
        'new_password': this.newPassword
      }
      this.axios.post('/users/modify_password/', qs.stringify(params))
      .then(function (res) {
        that.$toast.clear()
        if (res.status === 200) {
          that.$toast.success('密码修改成功')
          that.$store.dispatch('logout')
          that.$router.replace('/login')
        }
      })
      .catch(function (error) {
        that.$toast.clear()
        if (error.response) {
          that.$toast.fail(error.response.data.detail)
        } else {
          that.$toast.fail('密码修改失败')
        }
      })
    }
  }
}

</script>

<style lang="scss">
</style>
